<template>
  <div class="dialog-main">
    <el-dialog
      v-model="dialogVisible"
      width="50%"
      top="10vh"
      :before-close="handleClose"
      :show-close="false"
      draggable
    >
      <el-form
        :model="formData"
        label-position="left"
        status-icon
        :rules="rules"
        class="add-form"
        ref="ruleFormRef"
      >
        <el-form-item label="角色编码" prop="role_code">
          <el-input v-model="formData.role_code" />
        </el-form-item>
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="formData.sort" />
        </el-form-item>
      </el-form>
      <footer class="footer">
        <el-button @click="handleClose" class="btn button">关闭</el-button>
        <el-button class="btn" color="#6C52EA" @click="handleSave">保存</el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, reactive } from 'vue'
import { ElMessage, FormRules } from 'element-plus'
import { newRoleData, editRoleData } from '@/apis/jurisdiction/role'
const props = defineProps({
  dialog: {
    type: Boolean,
    required: true,
    default: false
  },
  dialogTitle: {
    type: String,
    required: true,
    default: '新增角色'
  },
  editList: {
    type: Object,
    required: false,
    default: () => {}
  },
  form: {
    type: Object,
    required: true,
    default: () => {}
  }
})
const formData = ref()
watch(
  () => props.form,
  (newVal) => {
    formData.value = newVal
  },
  { immediate: true }
)
const editLists = ref()
watch(
  () => props.editList,
  (newVal) => {
    editLists.value = newVal
    formData.value = editLists.value
  }
)
const dialogVisible = ref(false)
watch(
  () => props.dialog,
  (newVal) => {
    dialogVisible.value = newVal
  }
)
// 新增岗位
const showAddPost = ref(false)
const statusOptions = ref([
  { label: '正常', value: '正常' },
  { label: '待启用', value: '待启用' }
])

const rules = reactive<FormRules>({
  name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
  role_code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }],
  sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
})
const emit = defineEmits(['dialogClose', 'dialogSave'])

/**
 * 关闭弹窗
 */
const ruleFormRef = ref()
const showAddPosition = ref()
const handleClose = () => {
  ruleFormRef.value.resetFields()
  dialogVisible.value = false
  emit('dialogClose')
}

/**
 * 部门创建保存
 */
const handleSave = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      if (formData.value.id) {
        editData()
      } else {
        createData()
      }
    }
  })
}
/**
 * @desc: 创建部门岗位
 */
const createData = () => {
  newRoleData(formData.value)
    .then((res) => {
      if (!res) return
      emit('dialogSave')
      ruleFormRef.value.resetFields()
      ElMessage.success('创建成功')
    })
    .catch(() => {
      ElMessage('服务器内部错误！')
    })
}
/**
 * @desc: 修改部门岗位
 */
const editData = () => {
  editRoleData({
    _id: formData.value.id,
    name: formData.value.name,
    role_code: formData.value.role_code,
    sort: formData.value.sort
  })
    .then((res) => {
      if (!res) return
      emit('dialogSave')
      ruleFormRef.value.resetFields()
      ElMessage.success('创建成功')
    })
    .catch(() => {
      ElMessage('服务器内部错误！')
    })
}
</script>

<style lang="less" scoped>
.btn {
  width: 140px;
  height: 48px;
  opacity: 1;
  border-radius: 4px;
  border: 1px solid rgba(220, 223, 230, 1);
  padding: 15px 61px 15px 61px;
}
:deep(.el-form-item__content) {
  justify-content: center;
}
:deep(.el-dialog) {
  border-radius: 10px;
}
:deep(.el-input) {
  width: 90%;
}
:deep(.el-textarea__inner) {
  width: 90%;
}
.button {
  color: #6c52ea;
}
.button:hover {
  color: #6c52ea;
  border-color: #6c52ea;
  background-color: var(--el-button-hover-bg-color);
  outline: 0;
  opacity: 0.8;
}
.dialog-main {
  .add-form {
    height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 15%;
    padding-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(220, 223, 230, 1);
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    padding-top: 10px;
    text-align: right;
    .btn {
      width: 150px;
      height: 48px;
      opacity: 1;
      border-radius: 4px;
      border: 1px solid rgba(220, 223, 230, 1);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 15px 61px 15px 61px;
    }
  }
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
